<template>
    <div class="app-container">
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            :background-color="isCollapse ? '#343b43' : '#343b43'"
            :text-color="isCollapse ? '#fff' : '#fff'"
            :active-text-color="isCollapse ? '#ffd04b' : '#ffd04b'"
            :router="true"
          >
            <div style="text-align: center; padding: 16px 0; font-size: 16px; color: #fff; margin-left: -22px;">
              门诊预约系统
            </div>
            <el-menu-item index="/useradmin/userhome">
              <i class="el-icon-location"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="/useradmin/reservation">
              <i class="el-icon-menu"></i>
              <span slot="title">挂号预约</span>
            </el-menu-item>
            <el-menu-item index="/useradmin/userpay">
              <i class="el-icon-s-order"></i>
              <span slot="title">缴费中心</span>
            </el-menu-item>
            <el-menu-item index="/useradmin/paylists">
              <i class="el-icon-s-order"></i>
              <span slot="title">历史订单</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
  
        <el-container>
          <el-header style="background-color: #343b43; color: #fff; padding: 0;">
            <!-- 可添加其他头部内容，如用户信息等 -->
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isCollapse: false,
        users:[]
      };
    },
    computed: {
    user() {
      return this.$store.state.user;
      
    },
  },
    mounted() {
        this.getlist()
    },
    methods:{
      getlist() {
            axios.get(`http://127.0.0.1:3000/api/addreser/name/${this.user.name}`)
                .then(response => {
                    this.users = response.data;
                })
                .catch(error => {
                    console.error('Error fetching users:', error);
                    this.$message.error('获取用户列表时发生错误');
                });
        },
    }
  };
  </script>
  
  <style scoped>
  .app-container {
    height: 100vh;
  }
  
  .el-container {
    height: 100%;
  }
  
  .el-aside {
    overflow: hidden;
  }
  
  .el-menu-vertical-demo {
    width: 100%;
    height: 100%;
  }
  
  .el-menu-vertical-demo .el-submenu {
    color: #fff;
  }
  
  .el-menu-vertical-demo .el-menu-item {
    color: #fff;
  }
  </style>
  